<template>
  <div>
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      class="form-control my-input"
      v-model="todo.text"
      @keydown.enter="addToDo"
    >
  </div>
</template>

<script>
export default {
  name: 'to-do-header',
  data () {
    return {
      todo: {
        state: false,
        text: ''
      }
    }
  },
  methods: {
    addToDo () {
      let {text, state} = this.todo
      text = text.trim()
      if (!text) {
        alert('请输入内容！')
        return
      }
      const res = {text, state}
      this.$emit('addToDo', res)
      this.todo.text = ''
    }
  }
}
</script>

<style>
.my-input {
  padding: 20px;
  font-size: 20px;
}
</style>
